html,
body {
  margin: 0;
  padding: 0;

  .box {
    height: 50px;
    border-bottom: 3px #ffe5e5 solid;
    text-align: center;
    color: lightblue;
  }

  .box-a {
    width: 100%;
    margin: 0 auto;
    // display: flex;
    // justify-content: center;

    .holdall {
      width: 50%;
      height: 50px;
      line-height: 30px;
      text-align: center;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;

      .box-size {
        background-color: #f3d6d6;
        border-radius: 30px;


        .rangeset {
          padding: 0 10px 0 20px;
          box-sizing: border-box;
          position: relative;

          span {
            color: #0075ff;
            display: inline-block;
            width: 20px;
            height: 100%;

          }
        }
      }


    }

    .box-canvas {
      width: 1006px;
      height: 506px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;

      canvas {
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        border: 3px #efd9d9 dashed;
        z-index: -1;

      }

      .active {
        position: absolute;
        // display: none;
        border-radius: 50%;
        pointer-events: none;
        background-color: rgba(209, 190, 190);

      }

      .per {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        background-color: rgba(36, 32, 32, 0.329);

      }
    }

  }
}